<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="addUser" @close="close" :btnDisabled="type==3">
        <el-form ref="userForm" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="用户名" prop="userName">
                <div class="myitembox">
                    <div class="myipitem">
                        <el-input v-model="formData.userName" autocomplete="off" :disabled="type==3"/>
                    </div>
                    <div class="icontips">
                        <el-tooltip raw-content content="<p>非咪咕员工，用户名建议采用全拼_dmcy进行配置，</p>咪咕员工用户名需与其OA账号保持一致">
                            <el-icon :size="24" color="#cecbcb">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <div class="myitembox">
                    <div class="myipitem">
                        <el-input type="password" v-model="formData.password" autocomplete="new-password"  :disabled="type==3"/>
                    </div>
                    <div class="icontips">
                        <el-tooltip raw-content content="<p>根据咪咕公司相关安全要求，密码请按照以下规则设置:</p> <p>1.口令至少8位，必须由字母、数字与特殊符号混合、随机组成，不能出现用户名的全拼，</br>其中特殊符号仅限英文输入法的!@#$%^&*_-</p> <p>2.不能出现3位以上 (含3位)重复或连续字母，数字，特殊字符;</p> <p>3.不能出现3位以上 (含3位) 键盘排序密码，如qwe、asd、1qaz、! QAZ等;</p> <p>4.不能出现易猜解的口令，包含但不限于省份/地市名称、邮箱、单位名称、专业名称、</br>系统名称等全拼或缩写;</p> <p>5.密码三个月会强制进行修改，带来不便，敬请谅解!</p>">
                            <el-icon :size="24" color="#cecbcb">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="使用人" prop="realName">
                <div class="myitembox">
                    <div class="myipitem">
                        <el-input v-model="formData.realName" autocomplete="off" :disabled="type==3"/>
                    </div>
                    <div class="icontips">
                        <el-tooltip content="使用者真实姓名">
                            <el-icon :size="24" color="#cecbcb">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="所属公司" prop="company">
                <el-input v-model="formData.company"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="所属部门" prop="department">
                <el-input v-model="formData.department"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="岗位" prop="station">
                <el-input v-model="formData.station"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="角色" prop="roleIdList">
                <el-select v-model="formData.roleIdList" clearable placeholder="请选择角色" multiple style="width: 100%;" :disabled="type==3">
                    <el-option v-for="dt in roleList" :key="dt.roleId" :value="dt.roleId" :label="dt.roleName" />
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="formData.phone"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="mail">
                <el-input v-model="formData.mail"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark"  :disabled="type==3"/>
            </el-form-item>
            <el-form-item label="状态" class="userFormItem">
                <el-radio-group v-model="formData.deleteStatus" style="width: 100%;" :disabled="type==3">
                    <el-radio :label="1">生效</el-radio>
                    <el-radio :label="2">停用</el-radio>
                </el-radio-group>
                <div class="mytips">如果设置为停用，该账号将不能登录系统</div>
            </el-form-item>
            <el-form-item label="是否咪咕员工">
                <el-radio-group v-model="formData.ifMiguEmployee" style="width: 100%;" :disabled="type==3">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="失效时间" prop="expiryTime">
                <el-date-picker
                    v-model="formData.expiryTime"
                    type="datetime"
                    placeholder="失效时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :disabled="type==3"
                />
            </el-form-item>
        </el-form>
    </c-dialog>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import {getRoleList} from '@/api/user'
import cDialog from '@/components/custom/cDialog.vue'
import { message } from '@/utils/element'
import {addAccount,editAccount} from '@/api/user'
import {encodeRSA} from '@/utils/encryp'
import {decryptRSA} from '@/api/user'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type:Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show','success'])
const formData = ref({
    deleteStatus:1,
    ifMiguEmployee:2,
    roleIdList:[]
})
onMounted(()=>{
  
    if(props.type == 2 || props.type == 3){
       //const psw = decryptRSA(props.editData.password) // 解密
        formData.value = props.editData
        if(props.type == 2){ // 编辑时密码设为空（即不回显）
            formData.value.password = '' 
        }
    }
    get_role_list()
})
// 验证密码
const checkPassword = (rule, value, callback) => {
    if(props.type == 2 && !value) return callback()  // 编辑时，可以为空
    const myreg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#￥%^&*])[\da-zA-Z!@#￥%^&*]{8,20}$/;
    if (!myreg.test(value)) {
        return callback(new Error('密码8-20位，必须由字母、数字与特殊符号混合、随机组成'))
    } else {
        callback() // 验证通过
    }
}
// 验证手机号
const checkPhone = (rule, phone, callback) => {
    const myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!myreg.test(phone)) {
        return callback(new Error('手机号输入有误'))
    } else {
        callback() // 验证通过
    }
}
// 验证邮箱
const checkEmail = (rule, email, callback) => {
    if(!email) return callback()  // 为空不时验证通过
    const myreg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!myreg.test(email)) {
        return callback(new Error('邮箱输入有误'))
    } else {
        callback() // 验证通过
    }
}
const rules = ref({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, message: '最低1位字符', trigger: 'blur' },
        { max: 30, message: '最高30位字符', trigger: 'blur' }
    ],
    password: [
        { required: props.type == 1?true:false, message: '请输入密码', trigger: 'blur' },
        { validator:checkPassword, trigger: 'blur' }
    ],
    realName: [
        { required: true, message: '请输入使用人姓名', trigger: 'blur' },
        { min: 1, message: '最低1位字符', trigger: 'blur' },
        { max: 30, message: '最高30位字符', trigger: 'blur' }
    ],
    company: [
        { required: true, message: '请输入公司', trigger: 'blur' }
    ],
    roleIdList: [
        { required: true, message: '请选择角色', trigger: 'change' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator:checkPhone, trigger: 'blur' }
    ],
    mail: [
        { validator:checkEmail, trigger: 'blur' }
    ],
    expiryTime: [
        { required: true, message: '请选择失效时间', trigger: 'change' }
    ],
})

const userForm = ref(null)

const dialogFlag = ref(props.show)

const addUser = () => {
    userForm.value.validate(async valid => {
        if (valid) {
            let res = ''
            if(props.type==1){ // 新增
                formData.value.password = await encodeRSA(formData.value.password) // 加密
                res = await addAccount(formData.value)
            }else if(props.type==2){ // 编辑
                if(!formData.value.password){
                    delete formData.value.password
                }else{
                    formData.value.password = await encodeRSA(formData.value.password) // 加密
                }
                res = await editAccount(formData.value)
            }
            if(res.code == 200){
                message('数据提交成功',2)
                emit('success')
                close()
            }else{
                message(res.message,3) 
            }
        }else{
            message('请正确填写表单信息',3)
        }
    })
}
const roleList = ref([])
const get_role_list = async ()=>{
    const res = await getRoleList({age: 1, size: 1000})
    if(res.code ==200 ){
        roleList.value = res.data
    }

}
const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}
.myitembox{
    display: flex;
    width: 100%;
    .myipitem{
        flex: 1;
    }
    .icontips{
        display: flex;
        padding:0 0 0 4px;
        align-items: center;
    }
}
</style>
<style lang="scss">
.userFormItem {
    &.el-form-item--default {
        margin-bottom: 0;
    }
}
</style>